Reactμ experimental_useMutableSourceλ₯Ό μ¬μΈ΅ λΆμνμ¬, μ΅μ React μ ν리μΌμ΄μ μ μν κ°λ³ λ°μ΄ν° κ΄λ¦¬, λ³κ²½ κ°μ§ λ©μ»€λμ¦, μ±λ₯ κ³ λ € μ¬νμ νꡬν©λλ€.
React experimental_useMutableSource λ³κ²½ κ°μ§: κ°λ³ λ°μ΄ν° λ§μ€ν°νκΈ°
μ μΈμ μ κ·Ό λ°©μκ³Ό ν¨μ¨μ μΈ λ λλ§μΌλ‘ μλ €μ§ Reactλ μΌλ°μ μΌλ‘ λΆλ³ λ°μ΄ν° κ΄λ¦¬λ₯Ό κΆμ₯ν©λλ€. νμ§λ§ νΉμ μλ리μ€μμλ κ°λ³ λ°μ΄ν° μμ
μ΄ νμν©λλ€. Reactμ experimental_useMutableSource ν
μ μ€νμ μΈ λμμ± λͺ¨λ APIμ μΌλΆλ‘, κ°λ³ λ°μ΄ν° μμ€λ₯Ό React μ»΄ν¬λνΈμ ν΅ν©νλ λ©μ»€λμ¦μ μ 곡νμ¬ μΈλΆνλ λ³κ²½ κ°μ§ λ° μ΅μ νλ₯Ό κ°λ₯νκ² ν©λλ€. μ΄ κΈμμλ experimental_useMutableSourceμ λ―Έλ¬ν μ°¨μ΄, μ₯λ¨μ λ° μ€μ μμ λ₯Ό μ΄ν΄λ΄
λλ€.
Reactμμμ κ°λ³ λ°μ΄ν° μ΄ν΄νκΈ°
experimental_useMutableSourceλ₯Ό μ΄ν΄λ³΄κΈ° μ μ, Reactμμ κ°λ³ λ°μ΄ν°κ° μ μ΄λ €μ΄μ§ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. Reactμ λ λλ§ μ΅μ νλ μ΄μ μνμ νμ¬ μνλ₯Ό λΉκ΅νμ¬ μ»΄ν¬λνΈκ° λ€μ λ λλ§λμ΄μΌ νλμ§λ₯Ό κ²°μ νλ λ° ν¬κ² μμ‘΄ν©λλ€. λ°μ΄ν°κ° μ§μ λ³κ²½λλ©΄ Reactλ μ΄λ¬ν λ³κ²½μ κ°μ§νμ§ λͺ»νμ¬ νμλ UIμ μ€μ λ°μ΄ν° κ°μ λΆμΌμΉλ₯Ό μ΄λν μ μμ΅λλ€.
κ°λ³ λ°μ΄ν°κ° λ°μνλ μΌλ°μ μΈ μλ리μ€:
- μΈλΆ λΌμ΄λΈλ¬λ¦¬μμ ν΅ν©: μΌλΆ λΌμ΄λΈλ¬λ¦¬, νΉν 볡μ‘ν λ°μ΄ν° ꡬ쑰λ μ€μκ° μ λ°μ΄νΈλ₯Ό λ€λ£¨λ λΌμ΄λΈλ¬λ¦¬(μ: νΉμ μ°¨νΈ λΌμ΄λΈλ¬λ¦¬, κ²μ μμ§)λ λ΄λΆμ μΌλ‘ λ°μ΄ν°λ₯Ό κ°λ³μ μΌλ‘ κ΄λ¦¬ν μ μμ΅λλ€.
- μ±λ₯ μ΅μ ν: νΉμ μ±λ₯μ΄ μ€μν λΆλΆμμλ μ§μ μ μΈ λ³κ²½μ΄ μμ ν μλ‘μ΄ λΆλ³ 볡μ¬λ³Έμ λ§λλ κ²λ³΄λ€ μ½κ°μ μ΄μ μ μ 곡ν μ μμ§λ§, μ΄λ 볡μ‘μ±κ³Ό μ μ¬μ μΈ λ²κ·Έλ₯Ό κ°μν΄μΌ ν©λλ€.
- λ κ±°μ μ½λλ² μ΄μ€: μ€λλ μ½λλ² μ΄μ€μμ λ§μ΄κ·Έλ μ΄μ ν λ κΈ°μ‘΄μ κ°λ³ λ°μ΄ν° ꡬ쑰λ₯Ό λ€λ£¨μ΄μΌ ν μ μμ΅λλ€.
μΌλ°μ μΌλ‘ λΆλ³ λ°μ΄ν°κ° μ νΈλμ§λ§, experimental_useMutableSourceλ κ°λ°μκ° Reactμ μ μΈμ λͺ¨λΈκ³Ό κ°λ³ λ°μ΄ν° μμ€ μμ
μ νμ€ μ¬μ΄μ κ°κ·Ήμ λ©μΈ μ μκ² ν΄μ€λλ€.
experimental_useMutableSource μκ°
experimental_useMutableSourceλ κ°λ³ λ°μ΄ν° μμ€λ₯Ό ꡬλ
νκΈ° μν΄ νΉλ³ν μ€κ³λ React ν
μ
λλ€. μ΄ ν
μ React μ»΄ν¬λνΈκ° κ°λ³ λ°μ΄ν°μ κ΄λ ¨ λΆλΆλ§ λ³κ²½λμμ λ λ€μ λ λλ§λλλ‘ νμ¬ λΆνμν 리λ λλ§μ νΌνκ³ μ±λ₯μ ν₯μμν΅λλ€. μ΄ ν
μ Reactμ μ€νμ μΈ λμμ± λͺ¨λ κΈ°λ₯μ μΌλΆμ΄λ©° APIλ λ³κ²½λ μ μμ΅λλ€.
ν μκ·Έλμ²:
const value = experimental_useMutableSource(mutableSource, getSnapshot, subscribe);
λ§€κ°λ³μ:
mutableSource: κ°λ³ λ°μ΄ν° μμ€λ₯Ό λνλ΄λ κ°μ²΄μ λλ€. μ΄ κ°μ²΄λ λ°μ΄ν°μ νμ¬ κ°μ μ κ·Όνκ³ λ³κ²½ μ¬νμ ꡬλ νλ λ°©λ²μ μ 곡ν΄μΌ ν©λλ€.getSnapshot:mutableSourceλ₯Ό μ λ ₯μΌλ‘ λ°μ κ΄λ ¨ λ°μ΄ν°μ μ€λ μ·μ λ°ννλ ν¨μμ λλ€. μ΄ μ€λ μ·μ μ΄μ κ°κ³Ό νμ¬ κ°μ λΉκ΅νμ¬ λ¦¬λ λλ§μ΄ νμνμ§ κ²°μ νλ λ° μ¬μ©λ©λλ€. μμ μ μΈ μ€λ μ·μ λ§λλ κ²μ΄ μ€μν©λλ€.subscribe:mutableSourceμ μ½λ°± ν¨μλ₯Ό μ λ ₯μΌλ‘ λ°λ ν¨μμ λλ€. μ΄ ν¨μλ μ½λ°±μ κ°λ³ λ°μ΄ν° μμ€μ λ³κ²½ μ¬νμ ꡬλ ν΄μΌ ν©λλ€. λ°μ΄ν°κ° λ³κ²½λλ©΄ μ½λ°±μ΄ νΈμΆλμ΄ λ¦¬λ λλ§μ νΈλ¦¬κ±°ν©λλ€.
λ°ν κ°:
μ΄ ν
μ getSnapshot ν¨μκ° λ°νν λ°μ΄ν°μ νμ¬ μ€λ
μ·μ λ°νν©λλ€.
experimental_useMutableSourceμ μλ λ°©μ
experimental_useMutableSourceλ μ 곡λ getSnapshot λ° subscribe ν¨μλ₯Ό μ¬μ©νμ¬ κ°λ³ λ°μ΄ν° μμ€μ λ³κ²½ μ¬νμ μΆμ ν©λλ€. λ¨κ³λ³ λΆμμ λ€μκ³Ό κ°μ΅λλ€:
- μ΄κΈ° λ λλ§: μ»΄ν¬λνΈκ° μ²μ λ λλ§λ λ,
experimental_useMutableSourceλgetSnapshotν¨μλ₯Ό νΈμΆνμ¬ λ°μ΄ν°μ μ΄κΈ° μ€λ μ·μ μ»μ΅λλ€. - ꡬλ
: κ·Έλ° λ€μ ν
μ
subscribeν¨μλ₯Ό μ¬μ©νμ¬ κ°λ³ λ°μ΄ν°κ° λ³κ²½λ λλ§λ€ νΈμΆλ μ½λ°±μ λ±λ‘ν©λλ€. - λ³κ²½ κ°μ§: λ°μ΄ν°κ° λ³κ²½λλ©΄ μ½λ°±μ΄ νΈλ¦¬κ±°λ©λλ€. μ½λ°± λ΄λΆμμ Reactλ λ€μ
getSnapshotμ νΈμΆνμ¬ μλ‘μ΄ μ€λ μ·μ μ»μ΅λλ€. - λΉκ΅: Reactλ μλ‘μ΄ μ€λ
μ·μ μ΄μ μ€λ
μ·κ³Ό λΉκ΅ν©λλ€. μ€λ
μ·μ΄ λ€λ₯Έ κ²½μ°(
Object.isλλ μ¬μ©μ μ§μ λΉκ΅ ν¨μ μ¬μ©), Reactλ μ»΄ν¬λνΈμ 리λ λλ§μ μμ½ν©λλ€. - 리λ λλ§: 리λ λλ§ μ€μ
experimental_useMutableSourceλ λ€μgetSnapshotμ νΈμΆνμ¬ μ΅μ λ°μ΄ν°λ₯Ό μ»κ³ μ΄λ₯Ό μ»΄ν¬λνΈμ λ°νν©λλ€.
μ€μ©μ μΈ μμ
λͺ κ°μ§ μ€μ©μ μΈ μμ λ₯Ό ν΅ν΄ experimental_useMutableSourceμ μ¬μ©λ²μ μ€λͺ
νκ² μ΅λλ€.
μμ 1: κ°λ³ νμ΄λ¨Έμ ν΅ν©νκΈ°
νμμ€ν¬νλ₯Ό μ
λ°μ΄νΈνλ κ°λ³ νμ΄λ¨Έ κ°μ²΄κ° μλ€κ³ κ°μ ν΄ λ΄
μλ€. experimental_useMutableSourceλ₯Ό μ¬μ©νμ¬ React μ»΄ν¬λνΈμ νμ¬ μκ°μ ν¨μ¨μ μΌλ‘ νμν μ μμ΅λλ€.
// κ°λ³ νμ΄λ¨Έ ꡬν
class MutableTimer {
constructor() {
this._time = Date.now();
this._listeners = [];
this._intervalId = setInterval(() => {
this._time = Date.now();
this._listeners.forEach(listener => listener());
}, 1000);
}
get time() {
return this._time;
}
subscribe(listener) {
this._listeners.push(listener);
return () => {
this._listeners = this._listeners.filter(l => l !== listener);
};
}
}
const timer = new MutableTimer();
// React μ»΄ν¬λνΈ
import React, { experimental_useMutableSource as useMutableSource } from 'react';
const mutableSource = {
version: 0, // λ³κ²½ μΆμ μ μν λ²μ
getSnapshot: () => timer.time,
subscribe: timer.subscribe.bind(timer),
};
function CurrentTime() {
const currentTime = useMutableSource(mutableSource, mutableSource.getSnapshot, mutableSource.subscribe);
return (
νμ¬ μκ°: {new Date(currentTime).toLocaleTimeString()}
);
}
export default CurrentTime;
μ΄ μμ μμ MutableTimerλ μκ°μ κ°λ³μ μΌλ‘ μ
λ°μ΄νΈνλ ν΄λμ€μ
λλ€. experimental_useMutableSourceλ νμ΄λ¨Έλ₯Ό ꡬλ
νκ³ , CurrentTime μ»΄ν¬λνΈλ μκ°μ΄ λ³κ²½λ λλ§ λ€μ λ λλ§λ©λλ€. getSnapshot ν¨μλ νμ¬ μκ°μ λ°ννκ³ , subscribe ν¨μλ νμ΄λ¨Έμ λ³κ²½ μ΄λ²€νΈμ 리μ€λλ₯Ό λ±λ‘ν©λλ€. μ΄ μ΅μνμ μμ μμλ μ¬μ©λμ§ μμ§λ§, mutableSourceμ version μμ±μ λ°μ΄ν° μμ€ μ체μ μ
λ°μ΄νΈ(μ: νμ΄λ¨Έ κ°κ²© λ³κ²½)λ₯Ό λνλ΄κΈ° μν΄ λ³΅μ‘ν μλ리μ€μμ μ€μν©λλ€.
μμ 2: κ°λ³ κ²μ μνμ ν΅ν©νκΈ°
κ²μ μν(μ: νλ μ΄μ΄ μμΉ, μ μ)κ° κ°λ³ κ°μ²΄μ μ μ₯λλ κ°λ¨ν κ²μμ μκ°ν΄ λ΄
μλ€. experimental_useMutableSourceλ₯Ό μ¬μ©νμ¬ κ²μ UIλ₯Ό ν¨μ¨μ μΌλ‘ μ
λ°μ΄νΈν μ μμ΅λλ€.
// κ°λ³ κ²μ μν
class GameState {
constructor() {
this.playerX = 0;
this.playerY = 0;
this.score = 0;
this._listeners = [];
}
movePlayer(x, y) {
this.playerX = x;
this.playerY = y;
this.notifyListeners();
}
increaseScore(amount) {
this.score += amount;
this.notifyListeners();
}
subscribe(listener) {
this._listeners.push(listener);
return () => {
this._listeners = this._listeners.filter(l => l !== listener);
};
}
notifyListeners() {
this._listeners.forEach(listener => listener());
}
}
const gameState = new GameState();
// React μ»΄ν¬λνΈ
import React, { experimental_useMutableSource as useMutableSource } from 'react';
const mutableSource = {
version: 0, // λ³κ²½ μΆμ μ μν λ²μ
getSnapshot: () => ({
x: gameState.playerX,
y: gameState.playerY,
score: gameState.score,
}),
subscribe: gameState.subscribe.bind(gameState),
};
function GameUI() {
const { x, y, score } = useMutableSource(mutableSource, mutableSource.getSnapshot, mutableSource.subscribe);
return (
νλ μ΄μ΄ μμΉ: ({x}, {y})
μ μ: {score}
);
}
export default GameUI;
μ΄ μμ μμ GameStateλ κ°λ³ κ²μ μνλ₯Ό 보μ νλ ν΄λμ€μ
λλ€. GameUI μ»΄ν¬λνΈλ experimental_useMutableSourceλ₯Ό μ¬μ©νμ¬ κ²μ μνμ λ³κ²½ μ¬νμ ꡬλ
ν©λλ€. getSnapshot ν¨μλ κ΄λ ¨ κ²μ μν μμ±μ μ€λ
μ·μ λ°νν©λλ€. μ»΄ν¬λνΈλ νλ μ΄μ΄ μμΉλ μ μκ° λ³κ²½λ λλ§ λ€μ λ λλ§λμ΄ ν¨μ¨μ μΈ μ
λ°μ΄νΈλ₯Ό 보μ₯ν©λλ€.
μμ 3: μ νμ ν¨μλ₯Ό μ¬μ©ν κ°λ³ λ°μ΄ν°
λλ‘λ κ°λ³ λ°μ΄ν°μ νΉμ λΆλΆμ λ³κ²½μλ§ λ°μν΄μΌ ν λκ° μμ΅λλ€. getSnapshot ν¨μ λ΄μμ μ νμ ν¨μλ₯Ό μ¬μ©νμ¬ μ»΄ν¬λνΈμ νμν λ°μ΄ν°λ§ μΆμΆν μ μμ΅λλ€.
// κ°λ³ λ°μ΄ν°
const mutableData = {
name: "John Doe",
age: 30,
city: "New York",
country: "USA",
occupation: "Software Engineer",
_listeners: [],
subscribe(listener) {
this._listeners.push(listener);
return () => {
this._listeners = this._listeners.filter(l => l !== listener);
};
},
setName(newName) {
this.name = newName;
this._listeners.forEach(l => l());
},
setAge(newAge) {
this.age = newAge;
this._listeners.forEach(l => l());
}
};
// React μ»΄ν¬λνΈ
import React, { experimental_useMutableSource as useMutableSource } from 'react';
const mutableSource = {
version: 0, // λ³κ²½ μΆμ μ μν λ²μ
getSnapshot: () => mutableData.age,
subscribe: mutableData.subscribe.bind(mutableData),
};
function AgeDisplay() {
const age = useMutableSource(mutableSource, mutableSource.getSnapshot, mutableSource.subscribe);
return (
λμ΄: {age}
);
}
export default AgeDisplay;
μ΄ κ²½μ° AgeDisplay μ»΄ν¬λνΈλ mutableData κ°μ²΄μ age μμ±μ΄ λ³κ²½λ λλ§ λ€μ λ λλ§λ©λλ€. getSnapshot ν¨μλ νΉλ³ν age μμ±μ μΆμΆνμ¬ μΈλΆνλ λ³κ²½ κ°μ§λ₯Ό κ°λ₯νκ² ν©λλ€.
experimental_useMutableSourceμ μ₯μ
- μΈλΆνλ λ³κ²½ κ°μ§: κ°λ³ λ°μ΄ν°μ κ΄λ ¨ λΆλΆλ§ λ³κ²½λ λ λ€μ λ λλ§λμ΄ μ±λ₯μ΄ ν₯μλ©λλ€.
- κ°λ³ λ°μ΄ν° μμ€μμ ν΅ν©: React μ»΄ν¬λνΈκ° κ°λ³ λ°μ΄ν°λ₯Ό μ¬μ©νλ λΌμ΄λΈλ¬λ¦¬λ μ½λλ² μ΄μ€μ μννκ² ν΅ν©λ μ μλλ‘ ν©λλ€.
- μ΅μ νλ μ λ°μ΄νΈ: λΆνμν 리λ λλ§μ μ€μ¬ λ ν¨μ¨μ μ΄κ³ λ°μμ±μ΄ λ°μ΄λ UIλ₯Ό λ§λλλ€.
λ¨μ λ° κ³ λ € μ¬ν
- 볡μ‘μ±: κ°λ³ λ°μ΄ν°μ
experimental_useMutableSourceλ₯Ό μ¬μ©νλ κ²μ μ½λμ 볡μ‘μ±μ λν©λλ€. λ°μ΄ν° μΌκ΄μ± λ° λκΈ°νμ λν μ μ€ν κ³ λ €κ° νμν©λλ€. - μ€νμ API:
experimental_useMutableSourceλ Reactμ μ€νμ μΈ λμμ± λͺ¨λ κΈ°λ₯μ μΌλΆμ΄λ―λ‘ ν₯ν 릴리μ€μμ APIκ° λ³κ²½λ μ μμ΅λλ€. - μ μ¬μ λ²κ·Έ: κ°λ³ λ°μ΄ν°λ μ μ€νκ² μ²λ¦¬νμ§ μμΌλ©΄ λ―Έλ¬ν λ²κ·Έλ₯Ό μ λ°ν μ μμ΅λλ€. λ³κ²½ μ¬νμ΄ μ¬λ°λ₯΄κ² μΆμ λκ³ UIκ° μΌκ΄λκ² μ λ°μ΄νΈλλμ§ νμΈνλ κ²μ΄ μ€μν©λλ€.
- μ±λ₯ νΈλ μ΄λμ€ν:
experimental_useMutableSourceκ° νΉμ μλ리μ€μμ μ±λ₯μ ν₯μμν¬ μ μμ§λ§, μ€λ μ· μμ± λ° λΉκ΅ νλ‘μΈμ€λ‘ μΈν μ€λ²ν€λλ λ°μν©λλ€. μμν μ±λ₯ μ΄μ μ μ 곡νλμ§ νμΈνκΈ° μν΄ μ ν리μΌμ΄μ μ λ²€μΉλ§νΉνλ κ²μ΄ μ€μν©λλ€. - μ€λ
μ· μμ μ±:
getSnapshotν¨μλ μμ μ μΈ μ€λ μ·μ λ°νν΄μΌ ν©λλ€. λ°μ΄ν°κ° μ€μ λ‘ λ³κ²½λμ§ μλ νgetSnapshotμ νΈμΆν λλ§λ€ μ κ°μ²΄λ λ°°μ΄μ μμ±νμ§ λ§μμμ€. μ΄λ μ€λ μ·μ λ©λͺ¨μ΄μ¦νκ±°λgetSnapshotν¨μ μ체 λ΄μμ κ΄λ ¨ μμ±μ λΉκ΅νμ¬ λ¬μ±ν μ μμ΅λλ€.
experimental_useMutableSource μ¬μ©μ μν λͺ¨λ² μ¬λ‘
- κ°λ³ λ°μ΄ν° μ΅μν: κ°λ₯νλ©΄ μΈμ λ λΆλ³ λ°μ΄ν° ꡬ쑰λ₯Ό μ νΈνμμμ€. κΈ°μ‘΄ κ°λ³ λ°μ΄ν° μμ€μ ν΅ν©νκ±°λ νΉμ μ±λ₯ μ΅μ νλ₯Ό μν΄μλ§ νμν κ²½μ°μ
experimental_useMutableSourceλ₯Ό μ¬μ©νμμμ€. - μμ μ μΈ μ€λ
μ· μμ±:
getSnapshotν¨μκ° μμ μ μΈ μ€λ μ·μ λ°ννλλ‘ νμμμ€. λ°μ΄ν°κ° μ€μ λ‘ λ³κ²½λμ§ μλ ν λͺ¨λ νΈμΆμμ μ κ°μ²΄λ λ°°μ΄μ μμ±νμ§ λ§μμμ€. λ©λͺ¨μ΄μ μ΄μ κΈ°μ μ΄λ λΉκ΅ ν¨μλ₯Ό μ¬μ©νμ¬ μ€λ μ· μμ±μ μ΅μ ννμμμ€. - μ² μ ν μ½λ ν μ€νΈ: κ°λ³ λ°μ΄ν°λ λ―Έλ¬ν λ²κ·Έλ₯Ό μ λ°ν μ μμ΅λλ€. λ³κ²½ μ¬νμ΄ μ¬λ°λ₯΄κ² μΆμ λκ³ UIκ° μΌκ΄λκ² μ λ°μ΄νΈλλμ§ νμΈνκΈ° μν΄ μ½λλ₯Ό μ² μ ν ν μ€νΈνμμμ€.
- μ½λ λ¬Έμν:
experimental_useMutableSourceμ μ¬μ©κ³Ό κ°λ³ λ°μ΄ν° μμ€μ λν κ°μ μ λͺ ννκ² λ¬Έμννμμμ€. μ΄λ λ€λ₯Έ κ°λ°μκ° μ½λλ₯Ό μ΄ν΄νκ³ μ μ§ κ΄λ¦¬νλ λ° λμμ΄ λ κ²μ λλ€. - λμ κ³ λ €:
experimental_useMutableSourceλ₯Ό μ¬μ©νκΈ° μ μ Redux, Zustandμ κ°μ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νκ±°λ λΆλ³ λ°μ΄ν° ꡬ쑰λ₯Ό μ¬μ©νλλ‘ μ½λλ₯Ό 리ν©ν λ§νλ λ±μ λμμ μΈ μ κ·Ό λ°©μμ κ³ λ €νμμμ€. - λ²μ κ΄λ¦¬ μ¬μ©:
mutableSourceκ°μ²΄ λ΄μversionμμ±μ ν¬ν¨νμμμ€. λ°μ΄ν° μμ€ μ체μ κ΅¬μ‘°κ° λ³κ²½λ λλ§λ€(μ: μμ± μΆκ° λλ μ κ±°) μ΄ μμ±μ μ λ°μ΄νΈνμμμ€. μ΄λ₯Ό ν΅ν΄experimental_useMutableSourceλ λ°μ΄ν° κ°λΏλ§ μλλΌ μ€λ μ· μ λ΅μ μμ ν μ¬νκ°ν΄μΌ ν λλ₯Ό μ μ μμ΅λλ€. λ°μ΄ν° μμ€μ μλ λ°©μμ κ·Όλ³Έμ μΌλ‘ λ³κ²½ν λλ§λ€ λ²μ μ μ¦κ°μν€μμμ€.
μλνν° λΌμ΄λΈλ¬λ¦¬μμ ν΅ν©
experimental_useMutableSourceλ React μ»΄ν¬λνΈλ₯Ό λ°μ΄ν°λ₯Ό κ°λ³μ μΌλ‘ κ΄λ¦¬νλ μλνν° λΌμ΄λΈλ¬λ¦¬μ ν΅ν©νλ λ° νΉν μ μ©ν©λλ€. μΌλ°μ μΈ μ κ·Ό λ°©μμ λ€μκ³Ό κ°μ΅λλ€:
- κ°λ³ λ°μ΄ν° μμ€ μλ³: λΌμ΄λΈλ¬λ¦¬μ API μ€ μ΄λ λΆλΆμ΄ React μ»΄ν¬λνΈμμ μ κ·Όν΄μΌ νλ κ°λ³ λ°μ΄ν°λ₯Ό λ ΈμΆνλμ§ νμΈν©λλ€.
- κ°λ³ μμ€ κ°μ²΄ μμ±: κ°λ³ λ°μ΄ν° μμ€λ₯Ό μΊ‘μννκ³
getSnapshotλ°subscribeν¨μλ₯Ό μ 곡νλ JavaScript κ°μ²΄λ₯Ό μμ±ν©λλ€. - getSnapshot ν¨μ ꡬν: κ°λ³ λ°μ΄ν° μμ€μμ κ΄λ ¨ λ°μ΄ν°λ₯Ό μΆμΆνλλ‘
getSnapshotν¨μλ₯Ό μμ±ν©λλ€. μ€λ μ·μ΄ μμ μ μΈμ§ νμΈν©λλ€. - Subscribe ν¨μ ꡬν: λΌμ΄λΈλ¬λ¦¬μ μ΄λ²€νΈ μμ€ν
μ 리μ€λλ₯Ό λ±λ‘νλλ‘
subscribeν¨μλ₯Ό μμ±ν©λλ€. 리μ€λλ κ°λ³ λ°μ΄ν°κ° λ³κ²½λ λλ§λ€ νΈμΆλμ΄μΌ ν©λλ€. - μ»΄ν¬λνΈμμ experimental_useMutableSource μ¬μ©:
experimental_useMutableSourceλ₯Ό μ¬μ©νμ¬ κ°λ³ λ°μ΄ν° μμ€λ₯Ό ꡬλ νκ³ React μ»΄ν¬λνΈμμ λ°μ΄ν°μ μ κ·Όν©λλ€.
μλ₯Ό λ€μ΄, μ°¨νΈ λ°μ΄ν°λ₯Ό κ°λ³μ μΌλ‘ μ
λ°μ΄νΈνλ μ°¨νΈ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νλ κ²½μ° experimental_useMutableSourceλ₯Ό μ¬μ©νμ¬ μ°¨νΈμ λ°μ΄ν° λ³κ²½μ ꡬλ
νκ³ κ·Έμ λ°λΌ μ°¨νΈ μ»΄ν¬λνΈλ₯Ό μ
λ°μ΄νΈν μ μμ΅λλ€.
λμμ± λͺ¨λ κ³ λ € μ¬ν
experimental_useMutableSourceλ Reactμ λμμ± λͺ¨λ κΈ°λ₯κ³Ό ν¨κ» μλνλλ‘ μ€κ³λμμ΅λλ€. λμμ± λͺ¨λλ₯Ό μ¬μ©νλ©΄ Reactκ° λ λλ§μ μ€λ¨, μΌμ μ€μ§ λ° μ¬κ°ν μ μμ΄ μ ν리μΌμ΄μ
μ λ°μμ±κ³Ό μ±λ₯μ΄ ν₯μλ©λλ€. λμμ± λͺ¨λμμ experimental_useMutableSourceλ₯Ό μ¬μ©ν λλ λ€μ μ¬νμ μ μν΄μΌ ν©λλ€:
- ν°μ΄λ§(Tearing): ν°μ΄λ§μ λ λλ§ νλ‘μΈμ€ μ€λ¨μΌλ‘ μΈν΄ Reactκ° UIμ μΌλΆλ§ μ
λ°μ΄νΈν λ λ°μν©λλ€. ν°μ΄λ§μ νΌνλ €λ©΄
getSnapshotν¨μκ° μΌκ΄λ λ°μ΄ν° μ€λ μ·μ λ°ννλλ‘ ν΄μΌ ν©λλ€. - Suspense: Suspenseλ₯Ό μ¬μ©νλ©΄ νΉμ λ°μ΄ν°λ₯Ό μ¬μ©ν μ μμ λκΉμ§ μ»΄ν¬λνΈ λ λλ§μ μΌμ μ€λ¨ν μ μμ΅λλ€. Suspenseμ ν¨κ»
experimental_useMutableSourceλ₯Ό μ¬μ©ν λλ μ»΄ν¬λνΈκ° λ λλ§μ μλνκΈ° μ μ κ°λ³ λ°μ΄ν° μμ€λ₯Ό μ¬μ©ν μ μλμ§ νμΈν΄μΌ ν©λλ€. - Transitions: Transitionsλ₯Ό μ¬μ©νλ©΄ μ ν리μΌμ΄μ
μ μ¬λ¬ μν κ°μ λΆλλ½κ² μ νν μ μμ΅λλ€. Transitionsμ ν¨κ»
experimental_useMutableSourceλ₯Ό μ¬μ©ν λλ μ ν μ€μ κ°λ³ λ°μ΄ν° μμ€κ° μ¬λ°λ₯΄κ² μ λ°μ΄νΈλλμ§ νμΈν΄μΌ ν©λλ€.
experimental_useMutableSourceμ λμ
experimental_useMutableSourceκ° κ°λ³ λ°μ΄ν° μμ€μ ν΅ν©νλ λ©μ»€λμ¦μ μ 곡νμ§λ§ νμ μ΅μμ μ루μ
μ μλλλ€. λ€μ λμμ κ³ λ €νμμμ€:
- λΆλ³ λ°μ΄ν° ꡬ쑰: κ°λ₯νλ€λ©΄ μ½λλ₯Ό 리ν©ν λ§νμ¬ λΆλ³ λ°μ΄ν° ꡬ쑰λ₯Ό μ¬μ©νμμμ€. λΆλ³ λ°μ΄ν° ꡬ쑰λ λ³κ²½ μ¬νμ μΆμ νκ³ μ°λ°μ μΈ λ³κ²½μ λ°©μ§νκΈ° μ½κ² λ§λλλ€.
- μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬: Redux, Zustand λλ Recoilκ³Ό κ°μ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ μ ν리μΌμ΄μ μ μνλ₯Ό κ΄λ¦¬νμμμ€. μ΄λ¬ν λΌμ΄λΈλ¬λ¦¬λ λ°μ΄ν°μ λν μ€μ μ§μ€μ μ μ₯μλ₯Ό μ 곡νκ³ λΆλ³μ±μ κ°μ ν©λλ€.
- Context API: React Context APIλ₯Ό μ¬μ©νλ©΄ prop drilling μμ΄ μ»΄ν¬λνΈ κ°μ λ°μ΄ν°λ₯Ό 곡μ ν μ μμ΅λλ€. Context API μμ²΄κ° λΆλ³μ±μ κ°μ νμ§λ μμ§λ§ λΆλ³ λ°μ΄ν° ꡬ쑰 λλ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬μ ν¨κ» μ¬μ©ν μ μμ΅λλ€.
- useSyncExternalStore: μ΄ ν μ λμμ± λͺ¨λ λ° μλ² μ»΄ν¬λνΈμ νΈνλλ λ°©μμΌλ‘ μΈλΆ λ°μ΄ν° μμ€λ₯Ό ꡬλ ν μ μκ² ν΄μ€λλ€. νΉλ³ν *κ°λ³* λ°μ΄ν°λ₯Ό μν΄ μ€κ³λ κ²μ μλμ§λ§, μμΈ‘ κ°λ₯ν λ°©μμΌλ‘ μΈλΆ μ μ₯μμ λν μ λ°μ΄νΈλ₯Ό κ΄λ¦¬ν μ μλ€λ©΄ μ μ ν λμμ΄ λ μ μμ΅λλ€.
κ²°λ‘
experimental_useMutableSourceλ React μ»΄ν¬λνΈλ₯Ό κ°λ³ λ°μ΄ν° μμ€μ ν΅ν©νκΈ° μν κ°λ ₯ν λꡬμ
λλ€. μΈλΆνλ λ³κ²½ κ°μ§μ μ΅μ νλ μ
λ°μ΄νΈλ₯Ό νμ©νμ¬ μ ν리μΌμ΄μ
μ μ±λ₯μ ν₯μμν΅λλ€. κ·Έλ¬λ 볡μ‘μ±μ λνκ³ λ°μ΄ν° μΌκ΄μ± λ° λκΈ°νμ λν μ μ€ν κ³ λ €κ° νμν©λλ€.
experimental_useMutableSourceλ₯Ό μ¬μ©νκΈ° μ μ λΆλ³ λ°μ΄ν° ꡬ쑰λ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νλ λ±μ λμμ μΈ μ κ·Ό λ°©μμ κ³ λ €νμμμ€. experimental_useMutableSourceλ₯Ό μ¬μ©νκΈ°λ‘ κ²°μ νλ€λ©΄, μ½λκ° κ²¬κ³ νκ³ μ μ§λ³΄μ κ°λ₯νλλ‘ μ΄ κΈμμ μ€λͺ
ν λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄μμμ€.
experimental_useMutableSourceλ Reactμ μ€νμ μΈ λμμ± λͺ¨λ κΈ°λ₯μ μΌλΆμ΄λ―λ‘ APIκ° λ³κ²½λ μ μμ΅λλ€. μ΅μ React λ¬Έμλ₯Ό νμΈνκ³ νμμ λ°λΌ μ½λλ₯Ό μμ ν μ€λΉλ₯Ό νμμμ€. μ΅μμ μ κ·Ό λ°©μμ κ°λ₯ν λλ§λ€ νμ λΆλ³μ±μ μΆκ΅¬νκ³ , ν΅ν©μ΄λ μ±λ₯μμ μ΄μ λ‘ κΌ νμν κ²½μ°μλ§ experimental_useMutableSourceμ κ°μ λꡬλ₯Ό μ¬μ©νμ¬ κ°λ³ λ°μ΄ν° κ΄λ¦¬μ μμ‘΄νλ κ²μ
λλ€.